<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.6.0/+esm';

const darkThemes = ['ayu', 'navy', 'coal'];
const lightThemes = ['light', 'rust'];

const classList = document.getElementsByTagName('html')[0].classList;

let lastThemeWasLight = true;
for (const cssClass of classList) {
    if (darkThemes.includes(cssClass)) {
        lastThemeWasLight = false;
        break;
    }
}

const theme = lastThemeWasLight ? 'default' : 'dark';
mermaid.initialize({ startOnLoad: true, theme });

// Simplest way to make mermaid re-render the diagrams in the new theme is via refreshing the page

for (const darkTheme of darkThemes) {
    document.getElementById(darkTheme).addEventListener('click', () => {
        if (lastThemeWasLight) {
            window.location.reload();
        }
    });
}

for (const lightTheme of lightThemes) {
    document.getElementById(lightTheme).addEventListener('click', () => {
        if (!lastThemeWasLight) {
            window.location.reload();
        }
    });
}
</script>
